<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	h3{
	text-align: center;
	color: #5A5A5A;
}
		body{
			background: #000;
		}
		#box{
			width: 200px;
			height: 200px;
			margin:150px auto;
			background: #ccc;
			position: relative;
			transform:perspective(800px) rotateY(-60deg) rotateX(45deg);
			transform-style:preserve-3d;
		}
		#box div{
			width:100%;
			height:100%;
			position: absolute;
			top:0;
			left: 0;
			background-size:cover; 
			-webkit-box-shadow:0 0 100px #5fbcff;
			opacity: .8;
		}
		.front{
			transform:translateZ(100px);
			background: url(images/a5.png);
		}
		.back{
			transform:translateZ(-100px);
			background: url(images/a1.png);
		}
		.left{
			transform:translateX(-100px) rotateY(90deg);
			background: url(images/a2.png);
		}
		.right{
			transform:translateX(100px) rotateY(90deg);
			background: url(images/a3.png);
		}
		.top{
			transform:translateY(-100px) rotateX(90deg);
			background: url(images/a4.png);
		}
		.bottom{
			transform:translateY(100px) rotateX(90deg);
			background: url(images/a8.png);
		}
	</style>
	<script>
		window.onload=function()
		{
			var oBox=document.querySelector('#box');

			var y=-60;
			var x=45;
			oBox.onmousedown=function(ev)
			{
				var oEvent=ev||event;
				var disX=oEvent.clientX-y;
				var disY=oEvent.clientY-x;
				document.onmousemove=function(ev)
				{
					var oEvent=ev||event;
					x=oEvent.clientY-disY;
					y=oEvent.clientX-disX;
					oBox.style.transform='perspective(800px) rotateX('+x+'deg) rotateY('+y+'deg)';
				};
				document.onmouseup=function()
				{
					document.onmousemove=null;
					document.onmouseup=null;
				};
				return false;
			};
		};
	</script>
</head>
<body>
<h3>按住鼠标左键拖动</h3>
	<div id="box">
		<div class="front"></div>
		<div class="back"></div>
		<div class="top"></div>
		<div class="bottom"></div>
		<div class="left"></div>
		<div class="right"></div>
	</div>
</body>
</html>